<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin: 0;
        }
        ul {
            list-style: none;
            padding: 0;
            margin: 0;
            /* 将元素和定义为弹性盒模型 */
            /* display: flex; */
            /* 定义弹性盒的主轴方向 这个方向规定了弹性项的基本排列方式
            默认值是row row表示主轴方向为横向
            column 表示主轴方向为纵向
            row-reverse 横向倒序排列
            column-reverse 纵向倒序排列
             */
            /* flex-direction: row; */
            /* height: 600px; */
            /* 定义弹性项在主轴方向上的排列方式
            flex-start 弹性项沿开始方向布局
            flex-end 弹性项尾部对齐
            space-between 两边对齐中间留白
            space-around 两边的空白是弹性项中间的一半
            center居中对齐
             */
            /* justify-content: space-between; */
            /* height: 800px; */
            border: 1px solid #000;
            /* flex-wrap 定义弹性项的换行 nowrap不换行也是默认值
            wrap表示换行
            wrap-reverse 在交叉轴方向上倒转换行
             */
            /* flex-wrap: wrap; */
            /* 定义和主轴的交叉轴方向上的对齐方式 */
            /* 在只有一行的情况下
                flex-start是默认值 沿首部对齐
                flex-end 尾部对齐
                center 居中
                stretch 拉伸
                baseline 基线对齐
             */
            /* align-items: baseline; */
            /* 多行情况下生效的方式 */
            /* 
                flex-start 交叉轴方向首部对齐
                flex-end 交叉轴尾部对齐
                center 居中对齐
                space-between 两边对齐中间留白
                space-around 两边的空白是弹性项中间的一半
             */
            /* align-content: space-between; */
        }
        li {
            /* flex-basis 表示弹性项在主轴方向上的扩展距离 */
            /* flex 是  flex-basis flex-shrink flex-grow 的组合属性 */
            /* flex: 1 ,0 ,0; */
            /* flex-basis: 400px; */
            width: 30%;
            /* max-width: 300px; */
            margin-left: 20px;
            height: 150px;
            background-color: red;
            text-align: center;
            color: #fff;
            font-size: 50px;
            float: left;
            /* flex-grow: 0; */
            /* margin-top: 20px; */
            /* flex-shrink定义弹性项的缩小比例 */
            /* flex-shrink: 0; */
            
        }
        li:nth-child(1) {
            /* font-size: 100px; */
            /* background-color: blue;
            flex-basis: 200px; */
            /* flex-shrink: 0; */
            /* flex-grow: 1; */
            /* order: 1; */
        }
        li:nth-child(2) {
            /* background-color: green;
            flex-basis: 400px; */
            /* flex-shrink: 1; */
            /* flex-grow: 1; */
            /* order: 2; */
        }
        li:nth-child(3) {
            /* background-color: red;
            flex-basis: 800px; */
            /* flex-grow 定义弹性项的放大比例 */
            /* flex-grow: 1; */
            /* flex-shrink: 2; */
            /* order: 0; */
        }
        @media screen and (min-width: 1200px) {
            li {
                width: 20%;
            }
        }
        @media screen and (min-width: 700px and max-width: 800px) {
            li {
                width: 40%;
            }
        }

        @media screen and (max-width: 600px) {
            li {
                width: 80%;
            }
        }
    </style>
</head>
<body>
    <!-- <img src="./bg-top.svg" alt=""> -->
    <!-- <embed id="embedSvg" type="image/svg+xml" src="bg-top.svg"></embed> -->
    <ul>
        <li>1item</li>
        <li>2item</li>
        <li>3item</li>
        <li>4item</li>
        <li>5item</li>
        <li>6item</li>
        <li>7item</li> 
    
    </ul>
</body>
</html>